<!--
 * @Author: zhayang
 * @LastEditors: zhayang 1063975710@qq.com
 * @Date: 2024-06-27 22:40:29
 * @LastEditTime: 2024-07-03 22:16:47
 * @Description: 合集卡片
-->
<template>
  <div
    class="video-card h-240 p-20 flex full-w border border-#E0E0E0 rd-4"
    :class="{ 'is-isDo': isDo }"
    @click="handle(data.id)"
  >
    <img
      class="w-150 h-200 m-r-20 rd-4"
      :src="data.icon"
    />
    <div class="col p-y-12 relative">
      <div class="text-#1C1F23 text-14 line-height-16 font-600 m-b-8">
        {{ data.title }}
      </div>
      <div class="text-#6A6B6C text-12 line-height-14 font-600 m-b-8 ellipsis">
        {{ data.intro }}
      </div>
      <div class="text-#6A6B6C text-12 line-height-14 m-b-8">
        更新至第{{ data.video_qty }}集
      </div>
      <div class="text-#9E9E9E text-12 line-height-14">
        <span
          class="iconfont icon-guankan eye-icon"
          title="播放次数"
        ></span>
        <span class="m-l-8">{{ data.video_play_total_count }}</span>
      </div>
      <div
        class="ful--w absolute bottom-12 left-0 text-#9E9E9E text-12 line-height-14 items-center edit-info"
      >
        <div
          class="m-r-20 flex items-center"
          :class="[isDo ? 'cursor-not-allowed' : 'cursor-pointer']"
          @click.stop="!isDo && editVideo(data.id)"
        >
          <div class="iconfont icon-xiugai edit-icon"></div>
          <div class="m-l-8">修改信息</div>
        </div>
        <div
          class="flex items-center"
          :class="[isDo ? 'cursor-not-allowed' : 'cursor-pointer']"
          @click.stop="!isDo && deleteVideo(data.id)"
        >
          <div class="iconfont icon-x edit-icon text-#FF3F40"></div>
          <div class="m-l-8 text-#FF3F40">删除合集</div>
        </div>
      </div>
    </div>
    <div
      v-if="isDo"
      class="col-auto flex items-center"
    >
      <div
        class="video-card-check rd-9999 w-28 h-28 center text-#fff hover:bg-#61e1d1 cursor-pointer transition"
        :class="{ 'is-checked': isChecked }"
      >
        <div class="iconfont icon-duihao"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          id: '',
          icon: '',
          title: '',
          create_datetime: '',
          intro: '',
          video_qty: 0,
          video_play_total_count: 0
        }
      }
    },
    isChecked: Boolean,
    isDo: Boolean
  },
  data() {
    return {
      checked: false
    }
  },
  created() {},
  mounted() {},
  methods: {
    handle(id) {
      if (this.isDo) {
        this.changeVal(id)
      } else {
        this.$router.push({
          path: 'series-details',
          query: { uid: id }
        })
      }
    },
    changeVal(id) {
      this.$emit('check', id)
    },
    deleteVideo(id) {
      this.$emit('delete', id)
    },
    editVideo(id) {
      this.$emit('edit', id)
    }
  }
}
</script>
<style lang="scss" scoped>
.eye-icon {
  font-size: 12px !important;
}
.edit-icon {
  font-size: 14px !important;
}
.edit-info {
  display: none;
}
.video-card {
  &.is-isDo {
    cursor: pointer;
  }
  &:hover {
    background-color: #f4f5f9;
    transition: all 0.5s;
    .edit-info {
      display: flex;
      transition: all 0.5s;
    }
  }
  .video-card-check {
    background-color: #e0e0e0;
    &.is-checked {
      background-color: #61e1d1;
    }
  }
}
</style>
